AJAX রেসপন্স হল সার্ভার থেকে পাঠানো ডেটা, যা একবার ব্রাউজারকে পাঠানো হলে তা ওয়েব পেজে ডাইনামিকভাবে প্রদর্শিত হতে পারে। AJAX রিকোয়েস্টে সার্ভার থেকে যে রেসপন্স পাওয়া যায়, তা সাধারণত JSON, XML, HTML বা সাধারণ টেক্সট ফরম্যাটে থাকে।
AJAX রেসপন্সের মাধ্যমে ওয়েব পেজটি পুনরায় লোড না করেই নতুন ডেটা লোড করে, যা ইউজার ইন্টারফেসকে দ্রুত এবং সিম্পল রাখে।
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// GET রিকোয়েস্ট সেট করা
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রেসপন্স পেলে এই ফাংশনটি চলবে
xhr.onload = function() {
if (xhr.status === 200) {
// JSON ফরম্যাটে রেসপন্স পেতে
const data = JSON.parse(xhr.responseText);
console.log(data); // কনসোলে রেসপন্স দেখানো হবে
} else {
console.error('Error:', xhr.status);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
ব্যাখ্যা: এখানে একটি GET
রিকোয়েস্ট করা হয়েছে এবং সার্ভারের রেসপন্স JSON
ফরম্যাটে পাওয়া যাবে। রেসপন্স পাওয়া গেলে তা কনসোলে প্রদর্শিত হবে।
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট সেট করা
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
// হেডার সেট করা
xhr.setRequestHeader('Content-Type', 'application/json');
// রেসপন্স পেলে এই ফাংশনটি চলবে
xhr.onload = function() {
if (xhr.status === 201) {
// JSON ফরম্যাটে রেসপন্স পেতে
const data = JSON.parse(xhr.responseText);
console.log('Data Posted:', data); // কনসোলে রেসপন্স দেখানো হবে
} else {
console.error('Error:', xhr.status);
}
};
// পাঠানো ডেটা
const postData = JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
});
// রিকোয়েস্ট পাঠানো
xhr.send(postData);
ব্যাখ্যা: এখানে একটি POST
রিকোয়েস্ট পাঠানো হয়েছে এবং সার্ভার থেকে যে রেসপন্স আসবে, তা কনসোলে প্রদর্শিত হবে।
XMLHttpRequest
- Response এর বিভিন্ন উপাদানresponseText
এটি সার্ভার থেকে প্রাপ্ত ডেটাকে টেক্সট ফরম্যাটে রিটার্ন করে।
Syntax:
let response = xhr.responseText;
responseJSON
যদি রেসপন্স JSON ফরম্যাটে থাকে, তাহলে এই প্রপার্টি স্বয়ংক্রিয়ভাবে ডেটাকে পার্স করে একটি জাভাস্ক্রিপ্ট অবজেক্ট রিটার্ন করে।
Syntax:
let jsonResponse = xhr.responseJSON;
status
এটি সার্ভারের রেসপন্স কোড রিটার্ন করে। সাধারণ HTTP স্ট্যাটাস কোড গুলি:
200
: সফল রিকোয়েস্ট201
: সঠিকভাবে তৈরি করা হয়েছে (POST)400
: খারাপ রিকোয়েস্ট404
: পাতা পাওয়া যায়নি500
: সার্ভার সাইড সমস্যাSyntax:
let statusCode = xhr.status;
statusText
এই প্রপার্টি HTTP স্ট্যাটাস কোডের সাথে সম্পর্কিত স্ট্যাটাস মেসেজ রিটার্ন করে।
Syntax:
let statusText = xhr.statusText;
একটি সফল রেসপন্স প্রাপ্তি নিশ্চিত করতে নিচের মত কোড ব্যবহার করা হয়:
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// সঠিক রেসপন্স পাওয়া গেলে
const responseData = JSON.parse(xhr.responseText);
console.log('Data:', responseData);
} else {
// সঠিক রেসপন্স না পেলে
console.error('Request failed with status:', xhr.status);
}
};
রেসপন্সে কোনো সমস্যা হলে, যেমন সার্ভার রিফিউজ করেছে বা সময়সীমা পেরিয়ে গেছে, তখন onerror
ইভেন্ট ব্যবহার করা যেতে পারে:
xhr.onerror = function() {
console.error('Request failed');
};
AJAX রেসপন্স হল সার্ভার থেকে প্রাপ্ত ডেটা যা ব্রাউজারে ফিরে আসে এবং ওয়েব পেজে প্রদর্শিত হয়। XMLHttpRequest
ব্যবহার করে সার্ভারের রেসপন্সকে JSON, XML বা টেক্সট ফরম্যাটে পাওয়া যায় এবং তা ইউজার ইন্টারফেসে প্রদর্শিত হয়। AJAX রেসপন্সের মাধ্যমে ওয়েব পেজে ডাইনামিকভাবে ডেটা লোড করা সম্ভব হয়, যা অ্যাপ্লিকেশনকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more